import React from "react";
import { Button, Form, Input, message } from "antd";
import style from "./index.module.scss";
import login_desc from "./assets/login_desc.png";
import login_logo from "./assets/login_logo.png";
import login_title_cn from "./assets/login_title_cn.png";
import login_title_en from "./assets/login_title_en.png";
import { useAppDispatch } from "@/store/index";
import { useNavigate } from "react-router-dom";
import { set_user_info } from "@/store/slice/app";
import { setToken } from "@/utils";
import { loginPost } from "@/api/common";

const LoginPage: React.FC = () => {
  const [form] = Form.useForm();
  const [messageApi, contextHolder] = message.useMessage();
  const navigate = useNavigate();
  const dispatch = useAppDispatch();

  const onFinishFailed = (errorInfo: any) => {};

  async function onLogin(value: LoginBody) {
    const user_info = await loginPost(value);
    if (user_info.token) {
      setToken(user_info.token);
    }
    dispatch(set_user_info(user_info));
    navigate("/");
  }

  return (
    <div className={style.page_container}>
      {contextHolder}
      <div className={style.login_container}>
        <div className={style.login_left}>
          <div className={style.left_title}>
            <img src={login_desc} alt="" />
          </div>
        </div>
        <div className={style.login_right}>
          <div className={style.right_title}>
            <div>
              <img src={login_logo} alt="" />
            </div>
            <div className={style.title_container}>
              <div>
                <img src={login_title_cn} alt="" />
              </div>
              <div>
                <img src={login_title_en} alt="" />
              </div>
            </div>
          </div>
          <div className={style.right_form}>
            <Form
              onFinish={onLogin}
              size="large"
              labelCol={{ span: 5 }}
              wrapperCol={{ span: 20 }}
              labelAlign="left"
              onFinishFailed={onFinishFailed}
              form={form}
            >
              <Form.Item
                label="用户名"
                name="username"
                rules={[{ required: true, message: "请填写用户名" }]}
              >
                <Input placeholder="请输入" />
              </Form.Item>
              <div style={{ position: "relative" }}>
                <Form.Item
                  label="密码"
                  name="password"
                  rules={[{ required: true, message: "请输入密码" }]}
                >
                  <Input
                    placeholder="请输入密码"
                    style={{ padding: "7px 100px 7px 11px" }}
                  />
                </Form.Item>
              </div>
              <div className={style.form_btn}>
                <Button type="primary" htmlType="submit">
                  登录
                </Button>
              </div>
            </Form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default LoginPage;
